<template>
<<<<<<< HEAD
  <div class="quality-task-table-container">
    <!-- 搜索和重置 -->
    <!-- <div class="search-header">
      <el-input
        v-model="searchQuery"
        placeholder="请输入内容"
        class="search-input"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div> -->
    <el-table
      :data="tableData"
      style="width: 100%"
      class="dark-table"
      :header-cell-style="{
        backgroundColor: 'rgb(15, 53, 115)',
        color: '#91caf6',
      }"
      :cell-style="{
        backgroundColor: 'rgb(10, 43, 94)',
        color: '#91caf6',
      }"
      :row-style="{ height: '25px' }"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column
        v-for="item in arr || []"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      />
      <el-table-column type="operation" label="操作" width="80">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleView(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <!-- QueryConfig -->
      <!-- <el-table-column prop="tableName" label="名称" />
      <el-table-column prop="district" label="所属区县" />
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="deviceCategory" label="设备类别" />
      <el-table-column prop="deviceStatus" label="设备状态" /> -->
    </el-table>

    <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="arr.length" @current-change="handleCurrentChange" background class="dark-pagination" />
    </div>
    
    <div class="blood-chart" v-if="openChart" @click.self="openChart = false">
      <!-- <el-icon-close /> -->
      <div class="center-box">
        <BloodChart :lineage-data="lineageData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,onUpdated } from "vue";
import { Search } from "@element-plus/icons-vue";
import request from "@/request/index";
import BloodChart from "@/components/BloodChart/index.vue";

const props = defineProps({
  QueryConfig: {
    type: Object,
    default: () => ({
      url: "/api/zjjscApi/datasource/getSjkslMx",
      method: "get",
      params: {},
      data: {},
      columns: [
        {
          prop: "serialNumber",
          label: "序号",
          width: "80",
        },
        {
          prop: "databaseName",
          label: "名称",
          width: "80",
        },
        {
          prop: "type",
          label: "数据库",
          width: "80",
        },
      ],
    }),
    required: true,
  },
  fathUrl: {
    type: String,
    default: "",
  },
  arr: {
    type: Array,
    default: () => [],
  },
});

// 搜索关键词
const searchQuery = ref("");
// 当前页码
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(5);
const pagetotal = ref(0);

// 表格数据源
const tableData = ref([
  {
    serialNumber: "1",
    name: "设备A",
    district: "区县A",
    deviceName: "设备名称A",
    deviceCategory: "类别A",
    deviceStatus: "正常",
  },
  {
    serialNumber: "2",
    name: "设备B",
    district: "区县B",
    deviceName: "设备名称B",
    deviceCategory: "类别B",
    deviceStatus: "异常",
  },
  {
    serialNumber: "3",
    name: "设备C",
    district: "区县C",
    deviceName: "设备名称C",
    deviceCategory: "类别C",
    deviceStatus: "正常",
  },
]);

const openChart = ref(false);
const lineageData = ref({
  "tables": [
    {
      "id": 217,
      "tableName": "application",
      "tableNameZh": "(AI)应用表",
      "application": {
        "id": 1001,
        "orgId": 10106,
        "domainId": 100101,
        "name": "渝悦•安居",
        "owerUserId": 1,
        "level": 0,
        "path": "",
        "createdAt": "2024-09-12 16:16:00",
        "updatedAt": "2024-09-12 16:16:00"
      },
      "datasource": {
        "id": 1,
        "applicationId": 1001,
        "type": "MYSQL",
        "ip": "192.168.0.20",
        "port": 31370,
        "databaseName": "data_link",
        "name": "数据源1"
      },
      "fieldMetadatas": [
        {
          "id": 1341,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "created_at",
          "fieldNameZh": "创建时间22",
          "type": "TIMESTAMP",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1336,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "domain_id",
          "fieldNameZh": "业务域ID",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1334,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "id",
          "fieldNameZh": "id",
          "type": "INT UNSIGNED",
          "keyType": 1,
          "pk": true
        },
        {
          "id": 1339,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "level",
          "fieldNameZh": "层级",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1337,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "name",
          "fieldNameZh": "应用名称",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1335,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "org_id",
          "fieldNameZh": "部门ID",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1338,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "ower_user_id",
          "fieldNameZh": "ower用户ID",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1340,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "path",
          "fieldNameZh": "路径",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2601,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "test2",
          "fieldNameZh": "test2",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2602,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "test3",
          "fieldNameZh": "test",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2604,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "test4",
          "fieldNameZh": "df",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2600,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "tst1",
          "fieldNameZh": "test",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 1342,
          "position": 0,
          "tableMetadataId": 217,
          "fieldName": "updated_at",
          "fieldNameZh": "更新时间",
          "type": "TIMESTAMP",
          "keyType": 0,
          "pk": false
        }
      ],
      "applicationId": 1001,
      "datasourceId": 1
    },
    {
      "id": 292,
      "tableName": "testView",
      "tableNameZh": "VIEW",
      "application": {
        "id": 1001,
        "orgId": 10106,
        "domainId": 100101,
        "name": "渝悦•安居",
        "owerUserId": 1,
        "level": 0,
        "path": "",
        "createdAt": "2024-09-12 16:16:00",
        "updatedAt": "2024-09-12 16:16:00"
      },
      "datasource": {
        "id": 1,
        "applicationId": 1001,
        "type": "MYSQL",
        "ip": "192.168.0.20",
        "port": 31370,
        "databaseName": "data_link",
        "name": "数据源1"
      },
      "fieldMetadatas": [
        {
          "id": 2516,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "created_at",
          "fieldNameZh": "创建时间",
          "type": "TIMESTAMP",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2511,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "domain_id",
          "fieldNameZh": "业务域ID",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2509,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "id",
          "fieldNameZh": "id",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2514,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "level",
          "fieldNameZh": "层级",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2512,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "name",
          "fieldNameZh": "应用名称",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2510,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "org_id",
          "fieldNameZh": "部门ID",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2518,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "org_name",
          "fieldNameZh": "组织名",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2513,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "ower_user_id",
          "fieldNameZh": "ower用户ID",
          "type": "INT UNSIGNED",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2515,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "path",
          "fieldNameZh": "路径",
          "type": "VARCHAR",
          "keyType": 0,
          "pk": false
        },
        {
          "id": 2517,
          "position": 0,
          "tableMetadataId": 292,
          "fieldName": "updated_at",
          "fieldNameZh": "更新时间",
          "type": "TIMESTAMP",
          "keyType": 0,
          "pk": false
        }
      ],
      "applicationId": 1001,
      "datasourceId": 1
    }
  ],
  "lineages": [
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1334,
      "targetTableId": 292,
      "targetFieldId": 2509,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1335,
      "targetTableId": 292,
      "targetFieldId": 2510,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1336,
      "targetTableId": 292,
      "targetFieldId": 2511,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1337,
      "targetTableId": 292,
      "targetFieldId": 2512,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1338,
      "targetTableId": 292,
      "targetFieldId": 2513,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1339,
      "targetTableId": 292,
      "targetFieldId": 2514,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1340,
      "targetTableId": 292,
      "targetFieldId": 2515,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1341,
      "targetTableId": 292,
      "targetFieldId": 2516,
      "createdAt": null,
      "updatedAt": null
    },
    {
      "id": null,
      "sourceTableId": 217,
      "sourceFieldId": 1342,
      "targetTableId": 292,
      "targetFieldId": 2517,
      "createdAt": null,
      "updatedAt": null
    }
  ]
});

const filteredData = computed(() => {
  return tableData.value.filter((item) => {
    return Object.values(item).some((val) =>
      String(val).toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  });
});

// const currentPageData = computed(() => {
//   const startIndex = (currentPage.value - 1) * pageSize.value;
//   const endIndex = startIndex + pageSize.value;
//   return filteredData.value.slice(startIndex, endIndex);
// });

const handleSearch = () => {
  currentPage.value = 1;
  QueryTAbsInit();
};

const handleReset = () => {
  searchQuery.value = "";
  currentPage.value = 1;
  QueryTAbsInit();
};

const handleView = (row) => {
  console.log('handleView', row);
  openChart.value = true;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  QueryTAbsInit();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  QueryTAbsInit();
};
const QueryTAbsInit = () => {
  tableData.value = []; // 清空表格数据
  request({
    // url: props.QueryConfig.url,
    url: '/zjjscApi/api/fulllifecircle/tablesCountxxMx',
    method: "get",
    params: {
      pageNumber: 1,
      pageSize: 10,
    },
    timeout: 5000
  }).then((res) => {
    console.log(res, "查询数据");
    
    tableData.value = res.data.records?res.data.records:res.data;
    pagetotal.value = res.data.records.length?res.data.records.length:res.data.length;
  });
};
onMounted(() => {
  props.QueryConfig.url = props.fathUrl;
  console.log(props.QueryConfig, "处理事件1111>>>>>>>>>>>>>>>>>",props.fathUrl);
  // QueryTAbsInit();
});
</script>


<style scoped>
    .quality-task-table-container {
        background-color: rgb(15, 53, 115);
        color: #91caf6;
        overflow-y: auto;
        height: 100%;
        padding: 10px;
        position: relative;
    }

    .search-header {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .search-input {
        width: 200px;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    :deep(.dark-table) {
        height: 80%;
        background: rgb(10, 43, 94);
        --el-table-border-color: rgb(10, 43, 94);
        --el-table-border: 1px solid var(--el-table-border-color);
        --el-table-text-color: #91caf6;
        --el-table-header-text-color: #91caf6;
        --el-table-row-hover-bg-color: rgb(14, 51, 112);
    }

    :deep(.dark-pagination) {
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: #91caf6;
        --el-pagination-border-color: rgb(10, 43, 94);
        --el-pagination-hover-color: #409eff;
        --el-pagination-button-bg-color: transparent;
    }

    :deep(.el-button) {
        --el-button-bg-color: transparent;
        --el-button-border-color: #91caf6;
        --el-button-hover-bg-color: rgba(145, 202, 246, 0.1);
        --el-button-hover-border-color: #91caf6;
        --el-button-active-bg-color: rgba(145, 202, 246, 0.2);
        --el-button-text-color: #91caf6;
    }

    :deep(.el-button--primary) {
        --el-button-bg-color: rgba(64, 158, 255, 0.1);
        --el-button-border-color: #409eff;
        --el-button-hover-bg-color: rgba(64, 158, 255, 0.2);
        --el-button-hover-border-color: #409eff;
        --el-button-active-bg-color: rgba(64, 158, 255, 0.3);
        --el-button-text-color: #409eff;
    }

    :deep(.el-input) {
        --el-input-bg-color: transparent;
        --el-input-border-color: #91caf6;
        --el-input-text-color: #91caf6;
        --el-input-placeholder-color: rgba(145, 202, 246, 0.5);
    }

    /* 修改未点击时的数字方块背景颜色 */
    /* :deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
    background-color: #75fbff !important;
  } */
    /* 未点击时的数字方块背景颜色 */
    :deep .el-pagination .el-pager li:not(.active):not(.disabled) {
        background-color: #0e3a90 !important;
        color: #75fbff;
    }

    :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
        background-color: #75fbff !important;
        color: #01133c;
    }

    .blood-chart {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        .center-box {
          display: flex;
          flex-direction: column;
          gap: 20px;
          width: 80%;
          height: 100%;
          overflow: hidden;
          background: #ffffff;

        }
    }
</style>